<template>
	<view>
		<view class="uni-header">
			<view class="uni-group">
				<input class="uni-search" type="text" v-model="form.userId" placeholder="请输入用户ID" />
				<input class="uni-search" type="text" v-model="form.id" placeholder="请输入订单ID" />
				<uni-data-select v-model="form.status" :localdata="range" style="width: 260px;"></uni-data-select>
				<button class="uni-button" type="default" size="mini" @click="getData">搜索</button>
			</view>
		</view>
		<view class="uni-container">
			<uni-table :loading="loading" border stripe>
				<uni-tr>
					<uni-th align="center">订单ID</uni-th>
					<uni-th align="center">充值金额</uni-th>
					<uni-th align="center">充值号码</uni-th>
					<uni-th align="center">订单状态</uni-th>
					<uni-th align="center">申请时间</uni-th>
					<uni-th align="center">用户ID</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item ,index) in tableData" :key="index">
					<uni-td align="center">{{item._id}}</uni-td>
					<uni-td align="center">{{item.price}}元</uni-td>
					<uni-td align="center"> 
						{{item.tel}}<text style="color: #2979ff;cursor: pointer;margin-left: 10px;" @click="copy(item.tel)">复制</text>
					</uni-td>
					<uni-td align="center">
						<text v-if="item.status === 0">充值申请</text>
						<text v-if="item.status === 1">通过申请</text>
						<text v-if="item.status === 2">等待充值</text>
						<text v-if="item.status === 3">充值完成</text>
					</uni-td>
					<uni-td align="center">{{item.time | formatDate}}</uni-td>
					<uni-td align="center">{{item.userId}}</uni-td>
					<uni-td align="center">
						<view>
							<button size="mini" type="primary" style="margin-right: 10px;"
								@click="isshow = true, formStatus.id = item._id">
								订单处理
							</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>

			<view class="uni-pagination-box">
				<uni-pagination show-icon :page-size="form.limit" :current="form.skip" :total="total"
					@change="change" />
			</view>
		</view>

		<view>
			<cc-popup :isShow='isshow' width="600px" height="346px" radius="16rpx">
				<view style="text-align: center;padding: 30px 0;">请选择状态</view>
				<uni-data-select v-model="formStatus.status" :localdata="range" style="width: 260px;margin: auto;margin-top: 30px;"></uni-data-select>
				<view class="buttonBox">
					<view class="buttonBoxLeft" @click="isshow = false">
						取消
					</view>
					<view class="buttonBoxRight" @click="statusQud">
						确定
					</view>
				</view>
			</cc-popup>
		</view>
	</view>
</template>

<script>
	const selfOrder = uniCloud.importObject("self-order")

	export default {
		data() {
			return {
				isshow: false,
				form: {
					skip: 0,
					limit: 10,
					userId: "",
					id: "",
					status: ""
				},
				formStatus: {
					id: "",
					status: ""
				},
				tableData: [],
				total: 0,
				loading: true,
				range: [{
						value: 0,
						text: "充值申请"
					},
					{
						value: 1,
						text: "通过申请"
					},
					{
						value: 2,
						text: "等待充值"
					},
					{
						value: 3,
						text: "充值完成"
					}
				]
			}
		},
		methods: {
			getData() {
				selfOrder.getData(this.form).then(res => {
					if (res.code === 0) {
						this.tableData = res.data.data
						this.total = res.total.total
						this.loading = false
					}
				})
			},
			change(e) {
				this.form.skip = e.current
				this.getData()
			},
			statusQud() {
				selfOrder.orderStatus(this.formStatus).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: "修改成功"
						})

						this.getData()
						this.isshow = false;
					}
				})
			},
			copy(tel) {
				uni.setClipboardData({
					data: tel
				})
			}
		},
		mounted() {
			this.form.userId = this.$route.query.userId
			this.getData()
		}
	}
</script>

<style>

</style>